<template>
    <div class="container" style="overflow:hidden">
        <div id="game" style="width:100%;height:100%"></div>
    </div>
</template>

<script>
import GameMain from './p13/index.js'
import {winw, winh} from './p13/config'
import Socket from './p13/socket.js'
export default {
    name: 'p13', // 13人牛牛
    data () {
        return {
            game: {}
        }
    },
    mounted () {
        this.initGame()
    },
    destroyed () {
        Socket.close()
    },
    methods: {
        // 初始化游戏
        initGame () {
            let vm = this
            vm.game = new Phaser.Game(
                winw,
                winh,
                Phaser.AUTO,
                'game'
            )
            // 加载场景
            let preState = {
                preload: function () {
                    vm.game.load.image('preload', 'static/img/preload.jpg');
                    // 设置缩放
                    this.scale.scaleMode  = Phaser.ScaleManager.EXACT_FIT
                },
                create: function () {
                    vm.game.state.start('main')
                },
            }
            vm.game.state.add('pre', preState)
            // 游戏场景
            let mainState = {
                init: GameMain.init,
                preload: GameMain.preload,
                create: GameMain.create,
                update: GameMain.update
            }
            vm.game.state.add('main', mainState)
            vm.game.state.start('pre')
        }
    }
}
</script>

